<template>
  <div class="banner-box relative sm:h-[575px] h-[300px] sm:pt-16 pt-12">
    <img
      src="@/assets/contact_bj.jpg"
      class="w-full h-full object-cover"
      alt="" />
    <div
      class="absolute top-[50%] left-[10%] sm:translate-y-[-20%] flex flex-col z-10">
      <h1 class="sm:text-[51px] text-2xl lg:text-7xl font-bold text-white">
        CONTACT US
      </h1>
      <span class="text-white sm:text-4xl lg:text-5xl sm:mt-4"> 联系我们 </span>
    </div>
  </div>
  <!-- 公司简介 -->
  <section class="sm:py-16 py-4 bg-white">
    <div class="container-box md:px-40">
      <div class="w-full border-b border-gray-200 pb-12">
        <div class="sm:mb-12 mb-6 px-4">
          <h2 class="md:text-4xl text-2xl font-bold text-gray-800">
            CONTACT US
          </h2>
          <span class="md:text-2xl text-base">联系我们</span>
        </div>
        <div class="flex md:flex-row flex-col">
          <div
            class="flex flex-col gap-10 md:w-[30%] sm:min-w-[450px] w-full bg-blue-900 md:p-8 p-2">
            <div class="flex flex-col gap-10">
              <div class="flex gap-8 items-center">
                <div class="rounded-[50%] p-2">
                  <img
                    src="@/assets/phone.png"
                    class="md:w-[90px] w-[42px] h-[42px] md:h-[90px] object-cover rounded-[50%]"
                    alt="电话图标" />
                </div>
                <div class="flex flex-col md:gap-2 text-white">
                  <span class="md:text-[20px] text-sm">电话</span>
                  <span class="md:text-4xl text-xl">{{ company.phone }}</span>
                </div>
              </div>
              <div class="flex gap-8 items-center">
                <div class="rounded-[50%] p-2">
                  <img
                    src="@/assets/location.png"
                    class="md:w-[90px] md:h-[90px] w-[42px] h-[42px] rounded-[50%]"
                    alt="地址图标" />
                </div>
                <div class="flex flex-col md:gap-2 text-white">
                  <span class="md:text-[20px] text-sm">地址</span>
                  <span class="md:text-2xl text-base">
                    {{ company.address }}
                  </span>
                </div>
              </div>
              <!-- <div class="flex gap-8 items-center">
                <div class="bgColor rounded-[50%] p-2">
                  <img
                    src="@/assets/logo.png"
                    class="md:w-[90px] md:h-[90px] w-[42px] h-[42px] border rounded-[50%] border-red-200"
                    alt="邮箱图标" />
                </div>
                <div class="flex flex-col md:gap-2 text-white">
                  <span class="md:text-[20px] text-sm">邮箱</span>
                  <span class="md:text-2xl text-xl">{{ company.email }}</span>
                </div>
              </div> -->
            </div>
            <div class="grid grid-cols-2 gap-4">
              <div
                v-for="item in company.qrcodes"
                :key="item.name"
                class="flex flex-col items-center">
                <div class="bgColor rounded-lg p-2">
                  <img
                    :src="item.src"
                    class="md:w-[90px] md:h-[90px] border rounded-lg border-red-200"
                    alt="" />
                </div>
                <span class="text-white text-sm">{{ item.name }}</span>
              </div>
            </div>
          </div>
          <div
            id="map-box"
            class="border md:w-[70%] p-2 bg-gray-300 w-full md:h-[755px] h-[350px]"></div>
        </div>
      </div>
    </div>
  </section>
</template>
<script setup>
import { onMounted } from "vue";
// import AMapLoader from "@amap/amap-jsapi-loader";
import weChat from "@/assets/code.jpg";
import { getloactionToLatLng } from "@/api/tmap";
const company = {
  name: "上海智汇信息技术有限公司",
  address: "上海市",
  phone: "021-12345678",
  email: "info@shzhinfo.com",
  qrcodes: [
    {
      name: "微信",
      src: weChat,
    },
    {
      name: "QQ",
      src: weChat,
    },
    {
      name: "微博",
      src: weChat,
    },
    {
      name: "抖音",
      src: weChat,
    },
  ],
};
// 获取位置经纬度
// const getLatLng = async () => {
//   try {
//     const params = {
//       address: company.address,
//       key: "CRJBZ-WBZCT-B7AXE-VAPOO-FCL7K-LWBUZ",
//       output: "json",
//     };
//     const res = await getloactionToLatLng(params);
//     console.log("res", res);
//     return res.result?.location || [];
//   } catch (error) {
//     console.error("Error getting location:", error);
//   }
// };
const addMarker = (map, center) => {
  const marker = new TMap.MultiMarker({
    map: map,
    styles: {
      // 点标记样式
      marker: new TMap.MarkerStyle({
        width: 40, // 样式宽
        height: 60, // 样式高
        anchor: { x: 10, y: 40 }, // 描点位置
        offset: { x: 0, y: 50 },
        size: 24,
        color: "#3876ff",
        backgroundColor: "#fff",
        backgroundBorderColor: "#3876ff",
        backgroundBorderRadius: 6,
        // backgroundBorderWidth: 1,
        boxShadow: "0 8px 16px 16px rgba(0, 0, 0, 1)",
        padding: "6px 20px",
      }),
    },
    geometries: [
      // 点标记数据数组
      {
        // 标记位置(纬度，经度，高度)
        position: center,
        id: "marker",
        styleId: "marker",
        content: "炽焰运动",
        properties: {
          // 标注点的属性数据
          title: "marker",
        },
      },
    ],
  });
};
const initMap = () => {
  try {
    // Check if Tencent Maps API is loaded
    if (typeof TMap === "undefined") {
      console.error("Tencent Maps API not loaded");
      return;
    }
    var center = new TMap.LatLng(29.610295, 106.529996);
    const map = new TMap.Map("map-box", {
      rotation: 20, //设置地图旋转角度
      pitch: 30, //设置俯仰角度（0~45）
      zoom: 20, //设置地图缩放级别
      center: center, //设置地图中心点坐标
    });
    if (TMap.constants && TMap.constants.DEFAULT_CONTROL_ID) {
      map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
    }
    addMarker(map, center);
  } catch (error) {
    console.error("Error initializing map:", error);
  }
};
onMounted(() => {
  initMap();
});
</script>
<style scoped>
.banner-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(7, 51, 143, 0.35), transparent);
}
.bgColor {
  background-color: rgba(255, 255, 255, 0.1);
}
</style>
